<template>
	<div>
		<fnav></fnav>
		<car></car>
		<div class="home_content">
			<ul class="video_box">
				<a href="" v-for="(item,index) in showList">
					<div class="img_box">
						<div class="img_s_box">
							<img src="../common/img/tv.png"/>
							<img v-lazy="item.pic"/>
						</div>
						
						<div class="play_data">
							<div class="">
								<div class="index_svg_box"><svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use></svg></div>
								<span>{{_play_data(item.play)}}</span>
							</div>
							<div class="">
								<div class="index_svg_box"><svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use></svg></div>
								<span>{{_play_data(item.video_review)}}</span>
							</div>
						</div>
					</div>
					<div class="til_box">
						<p>{{item.title}}</p>
					</div>
				</a>
			</ul>
		</div>
		<!--<router-view/>-->
	</div>

</template>

<script>
	import carousel from "components/carousel";
	import fnav from "components/nav/nav";
	import CONFIG from "@/config";
	import axios from "axios";
	let Num=20;
	let isAdd=true;
	let doc="";
	let dis=0;
	export default {
		name: 'homepage',
		components: {
			"car": carousel,
			fnav
		},
		data(){
			return{
				arrList:[],
				showList:[]
			}
		},
		mounted(){
			this._getNews()
			this.addList();
		},
		methods:{
			_play_data(el){
				return el>10000?(el/10000).toFixed(1)+"万":el
			},
			_getNews(){
				var url=CONFIG.domain+"/shouye";
				var that=this;//普通函数需要用变量装起来
				axios({
					method:'get',
					url:url,
				}).then((res)=>{
					res.data.data.data.list.forEach(function(el,index){
						that.arrList.push(el)
					})
				}).then(()=>{
					this._showList();
				})
				
			},
			addList(){
				window.addEventListener("scroll",()=>{
					if(!isAdd){return}
					isAdd=false
					setTimeout(()=>{
						doc=document.documentElement||document.body;
//						dis=((doc.offsetHeight-doc.scrollTop)/doc.offsetHeight)*10|0;
						dis=Math.floor(((doc.offsetHeight-doc.scrollTop)/doc.offsetHeight)*10)
//						console.log(dis)
						isAdd=true;
						if(dis<4&&this.arrList.length){
							this._showList()
						}
					},500)
				})
			},
			_showList(){
				let con=this.arrList.splice(0,Num);
				this.showList=this.showList.concat(con)
			}
		}
	}
</script>

<style lang="scss">
</style>